<template>
    <div class="createPost-container">
        <el-form
        :model="userInfo"
        :rules="rules"
        ref="userForm"
        label-width="100px"
        class="demo-userForm"
        >
            <el-form-item label="用户名" prop="userName">
                <el-input :disabled="true" v-model="userInfo.userName"></el-input>
            </el-form-item>

            <el-form-item label="原密码" prop="password">
                <el-input type="password" v-model="userInfo.password"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" v-model="userInfo.newPassword"></el-input>
            </el-form-item>

            <el-form-item label="密码确认" prop="rePassword">
                <el-input type="password" v-model="userInfo.rePassword"></el-input>
            </el-form-item>

            <!-- <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name"></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="telPhone">
                <el-input v-model="userInfo.telPhone"></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userInfo.email"></el-input>
            </el-form-item> -->

            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')" :loading="loading">立即保存</el-button>
                <el-button @click="resetForm('userForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { updateUser, getInfo, changePassword } from "@/api/user";
export default{
    data(){
        var validPassword = (rule, value, callback) => {
            if (this.userInfo.newPassword == '')
            {
                callback(new Error('必须填写新密码'));
                return ;
            }

            if (value == '')
            {
                callback(new Error('必须填写密码确认'));
                return ;
            }

            if (this.userInfo.newPassword != value)
            {
                callback(new Error('新密码与密码确认不一致'));
                return ;
            }

            callback();
        };
        return {
            loading: false,
            userInfo: {
                userId: 0,
                userName: '',
                name: '',
                telPhone: '',
                sex: 0,
                roleId: 0,
                password: '',
                newPassword: '',
                rePassword: '',
                orgId: 0,
                email: ''
            },
            rules: {
                password: [{required: true, message: '必须输入原密码', trigger: "blur"}],
                newPassword: [
                    {required: true, message: '必须输入新密码', trigger: "blur"},
                    {min: 6, message: '密码不能少于6位', trigger: "blur"}
                ],
                rePassword: [
                    {required: true, message: '必须输入密码确认', trigger: "blur"},
                    {required: true, validator: validPassword, trigger: "blur"}
                ]
            }
        }
    },
    created(){
        // 需要编辑的产品ID
        let id = this.$route.params && this.$route.params.id;
        getInfo({id: id}).then(Response => {
            let userInfo = Response.data;
            this.userInfo.userId = userInfo.userId;
            this.userInfo.userName = userInfo.userName;
            this.userInfo.name = userInfo.name;
            this.userInfo.telPhone = userInfo.telPhone;
            this.userInfo.sex = userInfo.sex;
            this.userInfo.roleId = userInfo.roleId;
            this.userInfo.orgId = userInfo.orgId;
            this.userInfo.email = userInfo.email;
        });
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    this.loading = true;
                    try {
                        const { success, errorDetail } = await changePassword({
                            username: this.userInfo.userName,
                            oldPwd: this.userInfo.password,
                            newPwd: this.userInfo.newPassword
                        });
                        if (success == true) {
                            this.$notify({
                                title: "成功",
                                message: "密码修改成功",
                                type: "success",
                                duration: 2000
                            });
                            this.$router.go(-1);
                        }
                        else
                        {
                            this.$notify({
                                title: "失败",
                                message: errorDetail != null ? errorDetail : "密码修改失败",
                                type: "error",
                                duration: 2000
                            });
                        }
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;
  margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

</style>